<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <LINK REL=StyleSheet HREF="./css/main2.css" TYPE="text/css">
    </head>
    <body>
        <!--PRESENTATION DATA -->
        <c:set var="friends_names" scope="session">
            Waseem Mir,William Cheng
        </c:set>
        <c:set var="datetime" scope="session">
            12:52 PM, 2:03 AM
        </c:set>
        <c:set var="content" scope="session">
            Hey! I just thought I'd try out this comment system. I wanted to see if the text would wrap. Did it work? How do you like this site? It's pretty cool, huh? I think these guys deserve an A!!,
            Did you get that plan started?
        </c:set>
        <c:set var="fr_names" scope="session">
            Ron Burgundy, Jackie Chan
        </c:set>    
            
        <!--END PRESENTATION DATA-->
        
        <div id="page_head">
            <div class="wrapper">
                <div id="header_container">
                    <div id="logo">
                        <a href="dashboard.jsp">
                            <img src="./imgs/logo2.png" height="80" width="237"/>
                        </a>
                    </div>
                    <div id="header_links">
                        <div id="top_header_links">
                            <div class="top_header_btn">
                                <a href="accountSettings.jsp">Account Settings</a>
                            </div>
                            <div class="top_header_btn">
                                <a href="LoginServlet?action=logout">Log Out</a>
                            </div>
                        </div>
                        <div id="bottom_header_links">
                            <div class="bottom_header_btn">
                                <a href="dashboard.jsp">Home</a>
                            </div>
                            <div class="bottom_header_btn">
                                <a href="calendar.jsp">Calendar</a>
                            </div>
                            <div class="bottom_header_btn">
                                <a href="plans.jsp">Plans</a>
                            </div>
                            <div class="bottom_header_btn">
                                <a href="data.jsp">Data</a>
                            </div>
                            <div class="bottom_header_btn">
                                <a href="friends.jsp">Friends</a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <!-- page_head -->
        <div id="sticky_top">
            <div class="wrapper">
                <div class="container">
                    <div class="left_nav">
                        <c:forEach var="fr_name" items="${fr_names}" varStatus="loopCount">
                            <div class="friend_request_container">
                                <div class="request">
                                    ${fr_name} would like to be your friend.
                                </div>
                                <div class="accept_decline_container">
                                    <div class="accept_link_container">
                                        <div class="accept_link">
                                            <a href="accept">Accept</a>
                                        </div>
                                    </div>
                                    <div class="decline_link_container">
                                        <div class="decline_link">
                                            <a href="decline">Decline</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                        <!--BEGIN A COMMENT -->

                        <div class="comment_container">
                            <div class="author_time">
                                <div class="author">
                                    <span>Waseem Mir</span>
                                </div>
                                <div class="time_holder">
                                    <div class="time">
                                        <span>12:52 PM</span>
                                    </div>
                                </div>
                            </div>
                            <hr/>
                            <div class="content">
                                <span>
                                    Hey! I just thought I'd try out this comment
                                    system. I wanted to see if the text would wrap.
                                    Did it work? How do you like this site? It's pretty
                                    cool, huh? I think these guys deserve an A!!
                                </span>
                            </div>
                        </div>
                        <!-- END COMMENT -->

                    </div>
                    <div class="page_body">
                        <div class="body_hdr">
                            <span>Today's tasks</span>
                        </div>
                        <div class="event_container">
                            <div class="event_content">
                                <span>Run 3 miles</span>
                            </div>
                            <div class="event_buttons_container">
                                <div class="done_button">
                                    <a href="complete">Task Complete!</a>
                                </div>
                                <div class="not_done_button">
                                    <a href="not_complete">I'll do it later.</a>
                                </div>
                            </div>
                        </div>
                        <div class="event_container">
                            <div class="event_content">
                                <span>Record blood pressure</span>
                            </div>
                            <div class="metric_event_input">
                                <form name="BP_metric">
                                    <span>BP: <input name="systolic" type="text"/> / <input name="diastolic" type="text"/></span>
                                    <input class="submit" type="submit" name="submit" value="Complete!"/>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                    <!-- dashboard container -->
                </div>
                <!-- main -->
            </div>
            <!-- bg -->
            <div id="sticky_push"></div>
        </div>
        <!-- sticky_top -->
        <div id="sticky_bottom">
            <div class="wrapper">
                Hello this is the footer! place holder text.
            </div>
        </div>
        <!-- sticky bottom-->
    </body>
</html>
